{% extends "base.html" %}

{% block subtitle %}
  Playtesters' Queue
{% endblock subtitle %}

{% block content %}
  <script type="text/ng-template" id="playtestQueue/main">
    <div class="row">
      <div class="oppia-gallery span8">
        <table class="table">
          <thead>
            <th class="span4"><h4>Exploration</h4></th>
            <th class="span2"><h4>Category</h4></th>
            <th class="span2"><h4>Last updated</h4></th>
          </thead>
          <tr ng-repeat="exploration in explorations track by $index">
            <td class="span4">
              <a ng-href="/explore/<[exploration.id]>" class="oppia-gallery-tile">
                <div class="">
                  <span class="">
                    <i class="icon-play-circle"></i>
                  </span>
                  <span class="oppia-gallery-tile-title"><[exploration.title]></span>
                  <span ng-if="exploration.community_owned" class="label label-info pull-right">
                    Community-owned
                  </span>
                </div>
              </a>
            </td>
            <td class="span2">
              <[exploration.category]>
            </td>
            <td class="span2">
              <[getLocaleStringForDate(exploration.last_updated)]>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </script>

  <div class="container" ng-controller="PlaytestQueue">
    <div class="row">
      <div class="span8">
        <div class="oppia-gallery-frame">

          <h3 class="oppia-page-title">
            Playtesters' Queue
          </h3>

          <p>All explorations on this page are still in beta. Play them and give feedback to make them better!</p>
          <playtest-queue-section explorations="publicExplorations">
          </playtest-queue-section>

          <div ng-if="privateExplorations">
            <br><br>
            <h4>Private explorations you've been invited to playtest</h4>
            <playtest-queue-section explorations="privateExplorations">
            </playtest-queue-section>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('galleries/PlaytestQueue.js') }}
  </script>
{% endblock footer_js %}
